<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星语言乐章</title>
    <link rel="stylesheet" href="css/about us.css">
</head>
<body>
    <header>
        <div class="topBox">
            <img src="img/2logo.jpg">
            <p>关于&nbsp;slmmn</p>
        </div>
    </header>
    <section>
        <div class="box">

            <div class="list">
                <ul>
                    <li class="p7"><a href="#"><img src="img/background2.jpg" class="img"></a></li>
                    <li class="p6"><a href="#"><img src="img/background5.jpg" class="img"></a></li>
                    <li class="p5"><a href="#"><img src="img/background6.jpg" class="img"></a></li>
                    <li class="p4"><a href="#"><img src="img/background3.jpg" class="img"></a></li>
                    <li class="p3"><a href="#"><img src="img/background1.jpg" class="img"></a></li>
                    <li class="p2"><a href="#"><img src="img/tree.png" class="img"></a></li>
                    <li class="p1"><a href="#"><img src="img/background4.jpg" class="img"></a></li>
                </ul>
            </div>
            
            <a href="javascript:;" class="prev btn"><</a>
            <a href="javascript:;" class="next btn">></a>
        
            <div class="buttons">
                <a href="javascript:;"><span class="blue"></span></a>
                <a href="javascript:;"><span></span></a>
                <a href="javascript:;"><span></span></a>
                <a href="javascript:;"><span></span></a>
                <a href="javascript:;"><span></span></a>
                <a href="javascript:;"><span></span></a>
                <a href="javascript:;"><span></span></a>
            </div>
        </div>
        <div class="myBox">
            <h3>slmmn简介</h3>
            <p>slmmn是一家正在发展的互联网科技音乐有限公司，用创新的产品和服务提升全球各地人们的生活品质。</p>
            <p class="texP">slmmn成立于2023年，总部位于中国四川。公司一直秉承科技向善的宗旨。我们的音乐和社交服务连接全球逾1亿人，帮助他们与亲友联系，畅享便捷的出行、娱乐放松生活。</p>
            <p class="texP">slmmn收集多款风靡全球的数字音乐及其他优质数字内容，为全球用户带来丰富的互动娱乐体验。</p>
            <p class="texP">slmmn还提供服务、广告、音乐科技等一系列企业服务，支持合作伙伴实现数字化转型，促进业务发展。</p>
            <p class="texP">slmmn2023 年于星星联合交易所上市。</p>
        </div>
        <div class="xiwang">
            <h3>我们的愿景</h3>
            <div>
                <p>用户为本，音乐陶冶</p>
                <p>
                    一切以用户价值为依归，将音乐娱乐融入产品及服务之中；推动科技创新与文化传承，阻力各行各业升级，促进社会的可持续发展。
                </p>
            </div>
        </div>
    </section>
    <footer>
        <div class="first-div">
        </div>
        <div class="two-div">
            <img src="img/logo.jpg" class="logo2">
        </div>
        <div class="three-div">
            <p> 法律声明&nbsp;&nbsp;&nbsp;&nbsp;
                阳光准则&nbsp;&nbsp;&nbsp;&nbsp;
                网站地图&nbsp;&nbsp;&nbsp;&nbsp;
                粤网文【2017】6138-1456号&nbsp;&nbsp;&nbsp;&nbsp;
                粤B2-20090059&nbsp;&nbsp;&nbsp;&nbsp;
                粤公网安备 44030502008569号
            </p>
            <p>Copyright &copy; 1998 - 2023 Tencent. All Rights Reserved. 腾讯公司 版权所有</p>
        </div>
    </footer>
</body>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
var $a=$(".buttons a");
var $s=$(".buttons span");
var cArr=["p7","p6","p5","p4","p3","p2","p1"];
var index=0;
$(".next").click(
	function(){
	nextimg();
	}
)
$(".prev").click(
	function(){
	previmg();
	}
)
//上一张
function previmg(){
	cArr.unshift(cArr[6]);
	cArr.pop();
	//i是元素的索引，从0开始
	//e为当前处理的元素
	//each循环，当前处理的元素移除所有的class，然后添加数组索引i的class
	$("li").each(function(i,e){
		$(e).removeClass().addClass(cArr[i]);
	})
	index--;
	if (index<0) {
		index=6;
	}
	show();
}

//下一张
function nextimg(){
	cArr.push(cArr[0]);
	cArr.shift();
	$("li").each(function(i,e){
		$(e).removeClass().addClass(cArr[i]);
	})
	index++;
	if (index>6) {
		index=0;
	}
	show();
}

//通过底下按钮点击切换
$a.each(function(){
	$(this).click(function(){
		var myindex=$(this).index();
		var b=myindex-index;
		if(b==0){
			return;
		}
		else if(b>0) {
			/*
			 * splice(0,b)的意思是从索引0开始,取出数量为b的数组
			 * 因为每次点击之后数组都被改变了,所以当前显示的这个照片的索引才是0
			 * 所以取出从索引0到b的数组,就是从原本的这个照片到需要点击的照片的数组
			 * 这时候原本的数组也将这部分数组进行移除了
			 * 再把移除的数组添加的原本的数组的后面
			 */
			var newarr=cArr.splice(0,b);
			cArr=$.merge(cArr,newarr);
			$("li").each(function(i,e){
			$(e).removeClass().addClass(cArr[i]);
			})
			index=myindex;
			show();
		}
		else if(b<0){
			/*
			 * 因为b<0,所以取数组的时候是倒序来取的,也就是说我们可以先把数组的顺序颠倒一下
			 * 而b现在是负值,所以取出索引0到-b即为需要取出的数组
			 * 也就是从原本的照片到需要点击的照片的数组
			 * 然后将原本的数组跟取出的数组进行拼接
			 * 再次倒序,使原本的倒序变为正序
			 */
			cArr.reverse();
			var oldarr=cArr.splice(0,-b)
			cArr=$.merge(cArr,oldarr);
			cArr.reverse();
			$("li").each(function(i,e){
			$(e).removeClass().addClass(cArr[i]);
			})
			index=myindex;
			show();
		}
	})
})

//改变底下按钮的背景色
function show(){
		$($s).eq(index).addClass("blue").parent().siblings().children().removeClass("blue");
}

//点击class为p2的元素触发上一张照片的函数
$(document).on("click",".p2",function(){
	previmg();
	return false;//返回一个false值，让a标签不跳转
});

//点击class为p4的元素触发下一张照片的函数
$(document).on("click",".p4",function(){
	nextimg();
	return false;
});

//			鼠标移入box时清除定时器
$(".box").mouseover(function(){
	clearInterval(timer);
})

//			鼠标移出box时开始定时器
$(".box").mouseleave(function(){
	timer=setInterval(nextimg,4000);
})

//			进入页面自动开始定时器
timer=setInterval(nextimg,4000);
</script>
<div style="text-align:center;clear:both">
	<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
	<script src="/follow.js" type="text/javascript"></script>
</div>
</html>